<template>
	<div class="headimgRecommend">
		<div>
			<div>精选歌单</div>
			<slot>
				<musicList class="musiclist" :srcImg="Recommend"></musicList>
			</slot>
		</div>
		<div>
			<div>热门电台</div>
			<slot>
				<ul class="musiclist" v-if="!!newRecom">
					<li v-for="item,index in imgList">
						<div class="musicImg">
							<musicImg :src="item.avatar"></musicImg>
						</div>
						<p>{{item.name}}</p>
					</li>
				</ul>
			</slot>
		</div>
	</div>
</template>

<script>
	import jsonp from "jsonp";
	import musicImg from "./img.vue";
	import musicList from "./musicList";
	import songerMusicl from "./songermusicl";
	export default {
		name:"headimgRecommend",
		data(){
			return{
				items2:["精选歌单","热门电台"],
				Recommend:[],
//				newRecom:"",
			}
		},
		computed:{
			imgList(){
				return this.newRecom.result[1].channellist;	
			},
		},
		components:{
			musicList,
			musicImg,
			songerMusicl,
		},
        created(){
            var nowTime = new Date().getTime();//获取当前时间,注意返回值为毫秒
            if(sessionStorage.Recommend&&sessionStorage.newRecom&&sessionStorage.newRecomList){//判断之前是否已经存储了Recommend信息
                var tem = JSON.parse(sessionStorage.Recommend);//将存储的信息转化未json对象格式
                var tem2 = JSON.parse(sessionStorage.newRecom);//将存储的信息转化未json对象格式
                var tem3 = JSON.parse(sessionStorage.newRecomList);//将存储的信息转化未json对象格式
                if(nowTime - tem.expir<3600000){//判断存储信息的时间和当前时间的距离是否小于1小时
                    this.Recommend = tem.data;
                    this.newRecom = tem2.data;
                    this.newRecomList = tem3.data;
                     console.log(this.newRecomList)
                    console.log(this.newRecom)
                    return;//小于1h就直接return，不再执行ajaj请求
                }
            }
            jsonp("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=11&size=6&offset=0",null,(err,res)=>{
                if(err){
                    console.log(err)
                    if(tem){
                        this.Recommend = tem.data;//如果请求失败就用之前存储的值
                    }
                }else{
                    sessionStorage.Recommend = JSON.stringify({//把json对象格式转化为字符串
                    	
                        "data":res,
                        "expir":new Date().getTime()
                    });
                    this.Recommend = res;
                }
            })
            //电台
            jsonp(" http://tingapi.ting.baidu.com/v1/restserver/ting?from=qianqian&version=2.1.0&method=baidu.ting.radio.getCategoryList&format=json",null,(err,res)=>{
                if(err){
                    console.log(err)
                    if(tem2){
                        this.newRecom = tem2.data;//如果请求失败就用之前存储的值
                    }
                }else{
                    sessionStorage.newRecom = JSON.stringify({//把json对象格式转化为字符串
                        "data":res,
                        "expir":new Date().getTime()
                    });
                    this.newRecom = res;
                }
            })
            //电台音乐详细
            jsonp("http://tingapi.ting.baidu.com/v1/restserver/ting?from=qianqian&version=2.1.0&method=baidu.ting.radio.getChannelSong&format=json&pn=0&rn=10&channelname=public_tuijian_ktv",null,(err,res)=>{
                if(err){
                    console.log(err)
                    if(tem3){
                        this.newRecomList = tem3.data;//如果请求失败就用之前存储的值
                    }
                }else{
                    sessionStorage.newRecomList = JSON.stringify({//把json对象格式转化为字符串
                        "data":res,
                        "expir":new Date().getTime()
                    });
                    this.newRecomList = res;
                }
            })
        }
	}
</script>

<style scoped lang="scss">
	.headimgRecommend{
		overflow: hidden;
		width: 95%;
		margin: 0 auto;
		padding-bottom: 15%;
		div{
			margin-top: 2%;
			div{
				color: #ddd;
			}
			.musiclist li{
				text-align: center;
				width: 32.33%;
				display: inline-block;
				margin-top: 3%;
				margin-right: 1%;
			}
		}
	}
</style><template>
	<div class="headimgRecommend">
		<div>
			<div>精选歌单</div>
			<slot>
				<musicList class="musiclist" :srcImg="Recommend"></musicList>
			</slot>
		</div>
		<div>
			<div>热门电台</div>
			<slot>
				<ul class="musiclist" v-if="!!newRecom">
					<li v-for="item,index in imgList">
						<div class="musicImg">
							<musicImg :src="item.avatar"></musicImg>
						</div>
						<p>{{item.name}}</p>
					</li>
				</ul>
			</slot>
		</div>
	</div>
</template>

<script>
	import jsonp from "jsonp";
	import musicImg from "./img.vue";
	import musicList from "./musicList";
	import songerMusicl from "./songermusicl";
	export default {
		name:"headimgRecommend",
		data(){
			return{
				items2:["精选歌单","热门电台"],
				Recommend:[],
				newRecom:"",
			}
		},
		computed:{
			imgList(){
				return this.newRecom.result[1].channellist;	
			},
		},
		components:{
			musicList,
			musicImg,
			songerMusicl,
		},
        created(){
            var nowTime = new Date().getTime();//获取当前时间,注意返回值为毫秒
            if(sessionStorage.Recommend&&sessionStorage.newRecom){//判断之前是否已经存储了Recommend信息
                var tem = JSON.parse(sessionStorage.Recommend);//将存储的信息转化未json对象格式
                var tem2 = JSON.parse(sessionStorage.newRecom);//将存储的信息转化未json对象格式
                if(nowTime - tem.expir<3600000){//判断存储信息的时间和当前时间的距离是否小于1小时
                    this.Recommend = tem.data;
                    this.newRecom = tem2.data;
                    console.log( this.Recommend);
                    console.log( this.newRecom);
                    return;//小于1h就直接return，不再执行ajaj请求
                }
            }
            jsonp("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=11&size=6&offset=0",null,(err,res)=>{
                if(err){
                    console.log(err)
                    if(tem){
                        this.Recommend = tem.data;//如果请求失败就用之前存储的值
                    }
                }else{
                    sessionStorage.Recommend = JSON.stringify({//把json对象格式转化为字符串
                    	
                        "data":res,
                        "expir":new Date().getTime()
                    });
                    this.Recommend = res;
                }
            })
            //电台
            jsonp(" http://tingapi.ting.baidu.com/v1/restserver/ting?from=qianqian&version=2.1.0&method=baidu.ting.radio.getCategoryList&format=json",null,(err,res)=>{
                if(err){
                    console.log(err)
                    if(tem2){
                        this.newRecom = tem2.data;//如果请求失败就用之前存储的值
                    }
                }else{
                    sessionStorage.newRecom = JSON.stringify({//把json对象格式转化为字符串
                        "data":res,
                        "expir":new Date().getTime()
                    });
                    this.newRecom = res;
                }
            })
        }
	}
</script>

<style scoped lang="scss">
	.headimgRecommend{
		overflow: hidden;
		width: 95%;
		margin: 0 auto;
		padding-bottom: 15%;
		div{
			margin-top: 2%;
			div{
				color: #ddd;
			}
			.musiclist li{
				text-align: center;
				width: 32.33%;
				display: inline-block;
				margin-top: 3%;
				margin-right: 1%;
			}
		}
	}
</style>